<template>
    <el-card>
        <el-card>
            <el-row class="form-row">
                <el-form :model="filters" label-position="right" inline ref="formInline">
                    <el-form-item label="小区名称">
                        <div class="filters-input">
                            <el-select v-model="filters.housingId" filterable default-first-option placeholder="请选择小区"
                                       :clearable="true" no-data-text="暂无数据">
                                <el-option v-for="item in housingList" :key="item.id" :label="item.name"
                                           :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item label="交易类型">
                        <div class="filters-input">
                            <el-select v-model="filters.type" filterable placeholder="请选择交易类型" clearable>
                                <el-option value="TX09" label="微信"></el-option>
                                <el-option value="TX15" label="支付宝"></el-option>
                                <el-option value="TX02" label="银行卡"></el-option>
                                <el-option value="TX25" label="京东钱包"></el-option>
                                <el-option value="TX26" label="QQ钱包"></el-option>
                                <el-option value="TX18" label="扫码交易退货"></el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item label="交易日期">
                        <div class="filters-input">
                            <DatePicker type="daterange" v-model="filters.theDate" placeholder="请选择日期"
                                        clearable></DatePicker>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <button-group>
                            <Button type="primary" icon="ios-search" @click="handleQuery('formInline')">搜索
                            </Button>
                            <Button type="warning" icon="md-share-alt" @click="getBillPairExcel()">导出信息</Button>
                        </button-group>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-table stripe border :loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column label="小区名称" prop="housingName"></el-table-column>
                <el-table-column label="商户号" prop="businessNum"></el-table-column>
                <el-table-column label="交易类型" prop="type" :formatter="formatterPayType"></el-table-column>
                <el-table-column label="商户单号" prop="orderNo"></el-table-column>
                <el-table-column label="渠道单号" prop="orderId"></el-table-column>
                <el-table-column label="交易金额" prop="amount"></el-table-column>
                <el-table-column label="交易时间" prop="payTime"></el-table-column>
                <el-table-column label="清算时间" prop="clearTime" :formatter="dateFormat"></el-table-column>
                <el-table-column label="外部单号" prop="outId"></el-table-column>
            </el-table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  id="lyPage"
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </el-card>

        <!--<el-dialog :close-on-click-modal="false" title="导出对账信息" :visible.sync="billPairExport" width="900">
            <div class="pp-info">
                <el-form :model="billPair" :rules="rules" ref="billPairForm" label-width="100px"
                         class="demo-ruleForm">
                    <el-form-item label="小区名称" prop="housingId">
                        <el-select v-model="billPair.housingId" filterable default-first-option placeholder="请选择小区"
                                   :clearable="true" no-data-text="暂无数据" style="width: 100%">
                            <el-option v-for="item in housingList" :key="item.id" :label="item.name"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="交易日期">
                        <DatePicker type="daterange" v-model="billPair.theDate" placeholder="请选择日期"
                                    style="width: 100%" clearable></DatePicker>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="billPairExport = false">取 消</el-button>
                <el-button type="primary" @click="sureExport('billPairForm')">确 定</el-button>
            </div>
        </el-dialog>-->
    </el-card>
</template>


<script>
    import baseURL from '_conf/url';
    import qs from "qs";
    import moment from "moment";

    export default {
        data() {
            return {
                //校验规则
                rules: {
                    housingId: [
                        {
                            required: true,
                            message: "请选择小区",
                        }
                    ],
                },
                //查询条件
                filters: {
                    housingId: '',
                },
                housingList: [],
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                tableData: [],
                //表单提交状态
                tableLoading: false,
                billPairExport: false,
                billPair: {},
            }
        },
        created: function () {
            this.gethouse();
            this.loadData();
        },
        methods: {
            //加载小区
            gethouse() {
                let url = "/api/housing/getHousingByLogin";
                this.postRequest(url).then(res => {
                    this.housingList = res;
                    if (res[0].id) {
                        this.filters.housingId = res[0].id;
                    }
                });
            },
            //加载数据
            loadData: function () {
                if (this.tableLoading) return;
                this.tableLoading = true;
                let params = this.filters;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;
                //与后台交换数据
                this.postRequest("/api/billPair/loadData", params).then(res => {
                    console.log(res)
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //交易类型
            formatterPayType(row, column) {
                if (row.type == "TX02") {
                    return "银行卡";
                } else if (row.type == "TX09") {
                    return "微信";
                } else if (row.type == "TX15") {
                    return "支付宝";
                } else if (row.type == "TX25") {
                    return "京东钱包";
                } else if (row.type == "TX26") {
                    return "QQ钱包";
                } else if (row.type == "TX18") {
                    return "扫码交易退货";
                }
            },
            //格式化日期
            dateFormat: function (row, column) {
                let date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD");
            },
            //导出信息
            getBillPairExcel: function () {
                if (this.filters.theDate) {
                    if (this.filters.theDate[0] != "") {
                        this.filters.startDate = moment(this.filters.theDate[0]).format("YYYY-MM-DD");
                    }
                    if (this.filters.theDate[1] != "") {
                        this.filters.endDate = moment(this.filters.theDate[1]).format("YYYY-MM-DD");
                    }
                }
                window.location.href = baseURL + "/common/getBillPairExcel?" + qs.stringify(this.filters);
            },
            //查询
            handleQuery() {
                if (this.filters.theDate[0] != "") {
                    this.filters.startDate = moment(this.filters.theDate[0]).format("YYYY-MM-DD");
                }
                if (this.filters.theDate[1] != "") {
                    this.filters.endDate = moment(this.filters.theDate[1]).format("YYYY-MM-DD");
                }
                this.loadData();
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        }
    };
</script>
<style lang="less" scoped>
    #pop {
        width: 780px;
        height: 600px;
        display: none;
        position: fixed;
        z-index: 10;
        top: 10%;
        left: 50%;
        margin-left: -390px;
    }
</style>
